<template>
  <div class="notarizat-manage">
    <div class="manage-btns">
      <el-button size="small" type="primary" @click="openDialog('create', null)">新增公证处</el-button>
    </div>
    <div class="manage-list">
      <el-table :data="notarizat.list" border>
        <el-table-column prop="name" label="公证处名称"> </el-table-column>
        <el-table-column prop="address" label="公证处地址"> </el-table-column>
        <el-table-column prop="score" label="积分"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button size="small" type="warning" @click="openDialog('update', scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="delCompany(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :destroy-on-close='true' :width="500" :title="notarizat.dialogTitle" v-model="notarizat.modelVisible">
      <el-form label-position="left" class="edite-user-form">
        <el-form-item label="公证处名称" label-width="90px">
          <el-input size="small" v-model="notarizat.data.name"></el-input>
        </el-form-item>
        <el-form-item label="所在城市" label-width="90px">
          <CityChoose :status='notarizat.dialogType' :defaultCitys='notarizat.defaultCitys' @selected="selectedCity"></CityChoose>
        </el-form-item>
        <el-form-item label="详细地址" label-width="90px">
          <el-input size="small" v-model="notarizat.data.address"></el-input>
        </el-form-item>
        <el-form-item label-width="90px" class="edit-dialog-btn">
          <el-button size="small" type="primary" @click="summitCreate">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, toRaw, reactive } from 'vue';
import { useStore } from 'vuex';
import { ElMessage, ElMessageBox } from 'element-plus';
import { CityChoose } from '@/components'
export default defineComponent({
  name: 'notarizatManage',
  components: { CityChoose },
  setup() {
    const store = useStore();
    const notarizat = reactive({
      updateId: '',
      dialogType: '',
      dialogTitle: '',
      modelVisible: false,
      defaultCitys: [],
      data: {
        name: '',
        address: '',
        provinceID: '',
        cityID: '',
        countyID: '', 
      },
      list: [],
    });
    // 获取列表
    const getNotarizatList = async () => {
      notarizat.list = await store.dispatch('company/getManageList');
    };
    // 新增提交
    const summitCreate = async() => {
      const {name, address, provinceID, cityID, countyID} = notarizat.data;
      if (!name || !address || !provinceID || !cityID || !countyID) {
        ElMessage.warning('请完善信息后添加!');
        return;
      }
      switch (notarizat.dialogType) {
        case 'create':
          await store.dispatch('company/addCompany', notarizat.data);
          break;
        case 'update':
          await store.dispatch('company/updateCompany', {
            id: notarizat.updateId,
            ...notarizat.data,
          });
          break;
        default:
          break;
      }
      notarizat.modelVisible = false;
      await getNotarizatList();
    };
    // 选择城市后回调
    const selectedCity = (citys: any) => {
      notarizat.data.provinceID = citys[0];
      notarizat.data.cityID = citys[1];
      notarizat.data.countyID = citys[2];
    };
    // 删除
    const delCompany = async(id) => {
      await ElMessageBox.confirm('确定要删除此公证处吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      await store.dispatch('company/delCompany', { id });
      await getNotarizatList();
    };
    // 重置输入为空
    const resetUserInfo = () => {
      Object.keys(notarizat.data).forEach(item => notarizat.data[item] = '');
      notarizat.updateId = '';
    };
    // 打开弹窗
    const openDialog = (type:string, updateData:any) => {
      resetUserInfo();
      const types = {
        create: '新增公证处',
        update: '修改公证处'
      }
      notarizat.dialogTitle = types[type];
      notarizat.dialogType = type;
      if (type === 'update') {
        const {id, name, address, provinceID, cityID, countyID} = updateData;
        notarizat.data.name = name;
        notarizat.data.address = address;
        notarizat.data.provinceID = provinceID;
        notarizat.data.cityID = cityID;
        notarizat.data.countyID = countyID;
        notarizat.defaultCitys = [provinceID, cityID, countyID];
        notarizat.updateId = id;
      }
      notarizat.modelVisible = true;
    };

    onMounted(() => {
      getNotarizatList();
    });
    return {
      notarizat,
      openDialog,
      summitCreate,
      selectedCity,
      delCompany,
    };
  },
});
</script>
<style lang="scss" scoped>
.notarizat-manage {
  .manage-btns {
    @extend %container;
  }
  .manage-list {
    @extend %container;
    margin-top: 10px;
  }
  .edit-dialog-btn {
      text-align: right;
  }
}
</style>